<template>
  <!--模板-->
  <h1 >测试 BaseObject </h1>
  person：{{ person }}<br>
  v-for遍历：<br>
  <div v-for="(item, key, index) in person">
    {{ index }}： {{ key }}：{{ item }}
  </div>
  <el-button type="" @click="set2">整体赋值</el-button><br>
 
</template>

<script setup lang="ts" generic="T extends {name: string}">
  import { reactive, watch,ref,watchEffect, getCurrentInstance, useId } from 'vue'
  import { BaseObject } from '../../../lib/main'

  // const i = getCurrentInstance() 
  const flag = 'BaseObject 实例化用时：'
  console.time(flag)
  const person = new BaseObject({
    name: '基础类型',
    age:20
  })
  console.timeEnd(flag)

  console.log('看看结构：', person) 

  console.log('看看keys：', Object.keys(person))
 
  // 获取原型
  const foo = person.$toRaw()
  console.log('看看原型：', foo)

  let index = 0
  // 直接赋值
  const set2 = () => {
    person.$state = {
      name: 'state 赋值aaa' + index++,
      age: 30
    }
   
  }

  class sql {
    _cols: string[]
    _table: string
    _orderBy: string
    constructor() {
      this._cols = []
      this._table = ''
      this._orderBy = ''
    }
    select(col: string | string[]) {
      if (Array.isArray(col)){
        this._cols.push(...col)
      } else {
        this._cols.push(...col.split(','))
      }
      return this
    }
    from(table: string){
      this._table = table
      return this
    }
    orderBy(col: string){
      this._orderBy = col
      return this
    }

    start(){
      const sql = `select [${this._cols.join('],[')}] from '[${this._table}]' orderBy ${this._orderBy}`

      // `select ${this._cols.join(',')} from ${this._table}`
      return sql
    }
  }

  const sql1 = new sql()
  const sql2 = sql1.select('col1,col2').from('user').orderBy('id').start()
  console.log('看看sql：', sql2)


</script>